<html>
<head>
<title>pageX\pageY & layerX\layerY example</title>

<script type="text/javascript">


  
  
 function openqiqiu1(evt){
	 
		 var value2 = evt.pageX ? evt.pageX : evt.x;
		 var value3 = evt.pageY ? evt.pageY : evt.y;
		 var value4 = evt.layerX ? evt.layerX : evt.offsetX;
		 var value5 = evt.layerY ? evt.layerY : evt.offsetY;

		 document.getElementById("d3").style.display='';
		 document.getElementById("d3").style.left=value2 +100;
		 document.getElementById("d3").style.top=value3+100;

 }
 

  

</script>

<style type="text/css">

 #d1 {
  border: solid blue 1px;
  padding: 20px;
 }

 #d2 {
  position: absolute;
  top: 180px;
  left: 80%;
  right:auto;
  width: 40%;
  border: solid blue 1px;
  padding: 20px;
 }

 #d3 {
  position: absolute;
  top: 240px;
  left: 20%;
  width: 50%;
  border: solid blue 1px;
  padding: 10px;
 }

</style>
</head>

<body  onclick="openqiqiu1(event)">

<p>To display the mouse coordinates please click anywhere on the page.</p>

<div id="d1">
<span>This is an un-positioned div so clicking it will return
layerX/layerY values almost the same as pageX/PageY values.</span>
</div>

<div id="d2">

<span>This is a positioned div so clicking it will return layerX/layerY
values that are relative to the top-left corner of this positioned
element. Note the pageX\pageY properties still return the
absolute position in the document, including page scrolling.</span>

<span>Make the page scroll more! This is a positioned div so clicking it
will return layerX/layerY values that are relative to the top-left
corner of this positioned element. Note the pageX\pageY properties still
return the absolute position in the document, including page
scrolling.</span>

</div>

<div id="d3" name="d3" style=" position:absolute; left:100px; top:200px; width:100px; height:100px;">
will return layerX/layerY values that are relative to the top-left
corner of this positioned element. Note the pageX\pageY properties still
return the absolssssssssssssssssssssssssssssssssssssss

</div>

</body>
</html> 
